<template>
    <div class="box-container">
        <div class="title">
            <div>{{title}}</div>
            <div @click="closeMessageBox">&times;</div>
        </div>
        <div class="body">
            <i :class="['iconfont',icon]"></i>
            <span>
                {{message}}
            </span>
        </div>
        <div class="footer">
            <button class="btn" @click="cancleMessageBox">取消</button>
            <button class="btn primary" @click="okMessageBox">确认</button>
        </div>
    </div>
</template>

<script>
export default {
  model:{
    prop:'visiable',
   
  },
  props:['title',"icon","message"],
  methods:{
    closeMessageBox(){
        this.$emit('close')
    },
    cancleMessageBox(){
        this.$emit('cancle',false)
    },
    okMessageBox(){
        this.$emit('ok',true)
    }

  }
}
</script>

<style lang="scss">
    .box-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        position:absolute;
        left: 100px;
        top: 100px;
        width: 400px;
        height: 180px;
        background-color: #fff;
        .title{
            display: flex;
            justify-content: space-between;
            padding: 5px;
            background: skyblue;
            color: white;
            font-weight: bold;
        }
        .body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .footer{
            display: flex;
            justify-content: flex-end;
            padding: 20px;
            .btn{
                padding: 5px;
                background-color: #fff;
                border: 1px solid #ccc;
                margin: 2px;
                color: #999;
            }
            .primary{
                background: #3F9CFB;
                color: white;
            }
        }
    }
</style>